<template>
	<view class="Conversion" :class="equipment">
		<view class="Conversion_yue">
			<view class="Conversion_yue_title">
				当前{{title}}余额
			</view>
			<h2>{{res.balence}}</h2>
		</view>

		<view class="Conversion_input">
			<p>请输入兑换个数</p>
			<u--input placeholder="请输入兑换个数" border="surround" v-model="num" type='number' clearable></u--input>
			<view class="Conversion_input_huilu">
				<p>1个{{title}}可兑换</p>
				<p>{{res.rate}}余额</p>
			</view>
		</view>
		<view class="Conversion_an" @click="show = !show">
			确认
		</view>





		<view class="pay_password">
			<u-keyboard mode="number" @change="valChange" @backspace="backspace" :dotDisabled="true"
				@cancel="show = !show,value = ''" @confirm="queren" :show="show">
				<slot name="default">
					<p style="padding: 20rpx;text-align: center;">请输入交易密码</p>
					<u-code-input v-model="value" :disabledKeyboard='true' mode="line"
						style="padding: 20rpx;"></u-code-input>
				</slot>
			</u-keyboard>
		</view>
	</view>
</template>

<script>
	import {
		api_index_hz_info,
		api_index_tz_to_credit2,
		api_index_m_to_credit
	} from '@/api/member.js'
	export default {
		data() {
			return {
				equipment: '',
				type: '',
				res: '',
				title: '',
				num: '',
				show: false,
				value: '',
				openid: ''
			};
		},
		onLoad(e) {
			console.log(e);
			this.type = e.type;
			this.title = e.type === 'mjf' ? 'M积分' : '通证'

			uni.setNavigationBarTitle({
				title: `${this.title}转余额`
			});
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_hz_infoFun({
						openid: res.data,
						type: this.type
					})
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});







			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
		},
		methods: {
			valChange(e) {
				if (this.value.length === 6) {
					return
				} else {
					this.value += e;
				}
			},
			backspace(e) {
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
			},
			async api_index_hz_infoFun(up) {
				let data = await api_index_hz_info(up);
				this.res = data;
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async queren() {
				let up = {
					openid: this.openid,
					num: this.num,
					paypwd: this.value
				}
				let data = null;
				if (this.type === 'mjf') {
					data = await api_index_m_to_credit(up);
				} else {
					data = await api_index_tz_to_credit2(up);
				}
				if (data.error === 0) {
					this.value = '';
					this.show = false;
					this.num = '';
					this.api_index_hz_infoFun({
						openid: this.openid,
						type: this.type
					});
					this.showinteraction(data.message)
				} else {
					this.value = '';
				}
			}
		}
	}
</script>

<style lang="scss">
	.H5 {
		height: calc(100vh - 88rpx);
	}

	.App {
		height: 100vh;
	}

	.Conversion {
		width: 100%;
		padding: 20rpx 40rpx;

		.Conversion_yue {
			width: 100%;
			height: 220rpx;
			background-image: url('@/static/member/hldt.png');
			background-repeat: no-repeat;
			background-size: 100%;
			padding: 20rpx 40rpx;
			color: #fff;
			margin: 10rpx 0;

			h2 {
				font-size: 60rpx;
				font-weight: 500;

			}

			.Conversion_yue_title {
				color: #fff;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}

		.Conversion_input {
			width: 100%;

			p {
				padding: 10rpx;
				font-size: 26rpx;
				color: #666;

			}

			.Conversion_input_huilu {
				display: flex;
				justify-content: space-between;
				padding: 10rpx;

				p {
					font-size: 24rpx;
					color: #333;
				}
			}
		}

		.Conversion_an {
			width: 100%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 100rpx;
			background-color: #FF3232;
			margin: 20rpx 0;
			color: #fff;
		}
	}
</style>